// 引入Count UI 
import CountUI from "../../components/Count";
import { createIncrementAction, 
    createDecrenmentAction,
    createIncrementAsyncAction } from '../../redux/count_action'

// 引入connect 用于链接UI组件与redux 

import { connect } from 'react-redux'

/**
 *  mapStateToProps函数的返回值作为状态 传递给了UI组件 
 * props 的key,value 就作为传递给UI组件的 props的value
 * 
 * 1.mapStateToProps 函数返回的是一个对象 
 * 2.返回的对象中的key 就作为传递给UI组件的props的key, value 就作为传递给UI组件的Props的value 
 * 3.mapStateToProps 用于传递状态 
 */
const mapStateToProps=state=>({ count: state })

/**
 * mapDispatchToProps 函数 用于操作状态的方法  
 *  * 1.mapStateToProps 函数返回的是一个对象 
 * 2.返回的对象中的key 就作为传递给UI组件的props的key, value 就作为传递给UI组件的Props的value 
 * 3.mapDispatchToProps 用于传递操作状态的方法 
 * 4. mapDispatchToProps 也可以是一个对象, 也可以是一个 函数 
 */
const mapDispatchToProps=dispatch=>({
    // add: (number) => {dispatch(createIncrementAction(number))}
    add: number => dispatch(createIncrementAction(number)),
    jian:number=>dispatch(createDecrenmentAction(number)),
    addAsync:number=>dispatch(createIncrementAsyncAction(number))
})

// 创建容器组件  
const CountContianer = connect(
    state=>({ count: state }), 
    // mapDisPatchToProps 的一般写法
    // dispatch=>({
    //     add: number => dispatch(createIncrementAction(number)),
    //     jian:number=>dispatch(createDecrenmentAction(number)),
    //     addAsync:number=>dispatch(createIncrementAsyncAction(number))
    // })
    // mapDisPatchToProps 的简写  不用自己写action , react_redux 是可以自己做分发
    {
        add:createIncrementAction,
        jian:createDecrenmentAction,
        addAsync:createIncrementAsyncAction
    }
)(CountUI)

// 暴露容器组件 
export default CountContianer